﻿$ClrTheme: #3caed4; //主题颜色
$ClrThemeTxt: #666666; //主题前景文字
$ClrThemeHotTxt: #fff; //主题焦点区域的前景文字颜色
$ClrThemeBk: #2e3d4f; //主题暗色背景
$ClrFocus: #f19033; //凸显区域背景色
$ClrFocusTxt: #fff; //凸显区域前景色
$ClrMsg: #fff7bf; //一般消息背景
$ClrMsgBorder: #90d1e6;  //一般消息区域边框颜色
$ClrInfo: #e9f2fc; //提示性信息背景色
$ClrErr: #c51e32; //错误
$ClrWarning: #eff177; //警告
$ClrOk: #65ce7e; //一般表示成功的颜色
$ClrControllerBk: #f4f5f9; //默认交互元素背景色
$ClrDisable: #cccccc; //禁用时的前景色
$ClrDisableBk: #f0f0f0;  //禁用状态的背景色
$ClrImportant: #d86666; //表示十分重要的动作
$PageBk: #f5f5f5;  //页面底色
$ClrHover:#e3f3f9; //悬浮区域颜色
$ClrSlcted: rgba(60, 174, 212, 0.46); //列表行选中状态

$HeadHeight:6rem;  //标准头部导航条标准
$TopHeight:4rem;   //应用页面顶部导航条高度
$TitleHeight:2.6rem; //标准内容分栏标题行高度
$FloatShadow: 2px 4px 5px 0 #666666;  //标准浮动层阴影

$retina: 1900px; //现代大屏幕
$normal: 1370px; //经典PC宽屏
$old: 992px; //老式1024屏幕
$pad: 768px; //平板 ipad,老古董
$bigphone: 420px; //超大屏智能手机
$phone: 320px; //智能手机


//生成渐变色
@mixin linear-gradient($color...) {
    background: -webkit-linear-gradient($color);
    background: -moz-linear-gradient($color);
    background: -ms-linear-gradient($color);
    background: -o-linear-gradient($color);
    background: linear-gradient($color);
}

//可编辑区域
%inputArea {
    background-color: #ffffff;
    text-indent: 5px;
    color: #555555;
    border: 1px solid #ccc;
    outline: none;
    -webkit-appearance: none;
    outline-offset: 0;
    -moz-transition: box-shadow linear 0.2s;
    -o-transition: box-shadow linear 0.2s;
    -webkit-transition: box-shadow linear 0.2s;
    transition: box-shadow linear 0.2s;
    padding: 0;

    &:focus {
        box-shadow: 0 0 3px saturate($ClrTheme,20);
        border: 1px solid $ClrTheme;
    }

    &.error {
        border: 1px solid rgb(255,0,0);
        box-shadow: 0 2px 26px -2px rgba(230,0,0,0.45) inset;
    }

    &.error:focus {
        border: 1px solid rgb(255,0,0);
        box-shadow: 0 2px 26px -2px rgba(230,0,0,0.45) inset;
    }

    &.disabled {
        color: rgba(0, 0, 0, 0.5) !important;
        border-color: $ClrDisableBk !important;
        background-color: $ClrDisableBk !important;
        cursor: not-allowed !important;
        box-shadow: 0 0 5px 1px white inset !important;
    }

    &.error.disabled {
        color: rgba(0, 0, 0, 0.5) !important;
        background-color: $ClrDisableBk !important;
        border-color: $ClrDisableBk !important;
        cursor: not-allowed !important;
        box-shadow: 0 0 5px 1px white inset !important;
    }

    &.disabled:focus {
        color: rgba(0, 0, 0, 0.5) !important;
        background-color: $ClrDisableBk !important;
        border-color: $ClrDisableBk !important;
        cursor: not-allowed !important;
        box-shadow: 0 0 5px 1px white inset !important;
    }

    &:disabled {
        color: rgba(0, 0, 0, 0.5) !important;
        background-color: $ClrDisableBk !important;
        border-color: $ClrDisableBk !important;
        cursor: not-allowed !important;
        box-shadow: 0 0 5px 1px white inset !important;
    }
}
